<template>
  <div class="w1200 hospital_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb
        class="el_breadcrumb"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          ><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item
        >
        <!-- <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}</el-breadcrumb-item> -->
        <el-breadcrumb-item
          >{{ $cookies.get("city") || "全国" }}医生</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <!-- 筛选区域 开始 -->
    <div class="filter_box">
      <div class="cell_box">
        <div class="name">专业职称：</div>
        <div class="list_box">
          <div
            class="cell"
            :class="titleId == '' ? 'cell_active' : ''"
            @click="searchHospital('', 'titleId')"
          >
            全部
          </div>
          <div
            class="cell"
            :class="titleId == item.id ? 'cell_active' : ''"
            v-for="(item, index) in titleList"
            :key="`type_${index}`"
            @click="searchHospital(item.id, 'titleId')"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="cell_box">
        <div class="name">擅长项目：</div>
        <div class="list_box">
          <div
            class="cell"
            :class="projectId == '' ? 'cell_active' : ''"
            @click="searchHospital('', 'projectId')"
          >
            全部
          </div>
          <div
            class="cell"
            :class="projectId == item.id ? 'cell_active' : ''"
            v-for="(item, index) in projectList"
            :key="`type_${index}`"
            @click="searchHospital(item.id, 'projectId')"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 筛选区域 end -->

    <!-- 申请 开始 -->
    <Settlement />
    <!-- 申请 end -->

    <!-- 内容 开始 -->
    <div class="content">
      <!-- 左侧医生列表 开始 -->
      <div class="left_box">
        <!-- 列表 开始 -->
        <div class="hospital_list">
          <template v-if="doctorList && doctorList.length">
            <div
              class="list_doctor"
              v-for="(item, index) in doctorList"
              :key="`doctor_${index}`"
            >
              <Doctor :info="item" />
            </div>
            <template v-if="doctorList.length % 4">
              <div
                class="hidden_cell"
                v-for="(hitem, idx) in 4 - (doctorList.length % 4)"
                :key="`hi_${idx}`"
              ></div>
            </template>
          </template>
        </div>
        <!-- 列表 end -->

        <!-- 分页 开始 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            prev-text="上一页"
            next-text="下一页"
            :page-size="pageSize"
            :current-page="pageNumber"
            :total="total"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
        <!-- 分页 end -->
      </div>
      <!-- 左侧医生列表 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <!-- 口腔百科 开始 -->
        <div class="problem_box">
          <div class="head">口腔百科</div>
          <div class="list_box">
            <BaikeCell
              v-for="(item, index) in baikeList"
              :key="`problem_${index}`"
              :info="item"
            />
            <!-- <div class="cell" v-for="(item, index) in baikeList" :key="`problem_${index}`">
                            <div class="avatar">
                                <li-image :src="item.pictures" class="img"></li-image>
                            </div>
                            <div class="info">
                                <div class="title">
                                    <span class="name">{{ item.name }}</span>
                                    <div class="score">
                                        <span class="sp1">热度</span>
                                        <span class="sp2">{{ item.hotScore }}</span>
                                    </div>
                                </div>
                                <div class="ellipsis desc">{{ item.projectIntroduce }}</div>
                                <div class="sub_desc">
                                    <span class="sp1">治疗周期</span>
                                    <span class="sp2">{{ item.treatmentCycle }}</span>
                                </div>
                                <div class="sub_desc">
                                    <span class="sp1">操作时间</span>
                                    <span class="sp2">{{ item.operationTime }}</span>
                                </div>
                            </div>
                        </div> -->
          </div>
        </div>
        <!-- 口腔百科 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
    <!-- 内容 end -->
  </div>
</template>
<script>
import {
  PLATFORM_TYPE,
  GET_DOCTOR_TITLE_OPTIONS,
  GET_HOSPITAL_PROJECT_OPTIONS,
  GET_DOCTOR_SEARCH,
  GET_ORALCAVITY_BAIKE_SEARCH,
  GET_SEO_SETTING_INFO,
} from "@/http/interface";
import qs from "qs";
import Settlement from "@/components/apply/index.vue";
import Doctor from "@/components/doctor/index.vue";
import BaikeCell from "@/components/baike/cell.vue";
export default {
  components: {
    Doctor,
    Settlement,
    BaikeCell,
  },
  data() {
    return {
      titleList: [],
      projectList: [],
      titleId: "",
      projectId: "",
      form: {},
      doctorList: [],
      total: 0,
      pageNumber: 1,
      pageSize: 20,
      baikeList: [],
      seoInfo: {},
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
        {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:'https://m.lilikq.com/doctor'
                }
      ],
      link: [{ ref: "canonical", href: `${this.$domain}/doctor` }],
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios, $cookies }) {
    let pageNumber = Number(query.pageNumber || 1);
    let tes = await $axios.get(GET_DOCTOR_TITLE_OPTIONS);
    let titleList = tes.data || [];

    // 擅长项目
    let pro = await $axios.get(GET_HOSPITAL_PROJECT_OPTIONS);
    let projectList = pro.data || [];

    // 医生列表
    let params = { pageSize: 20 };
    params.pageNumber = pageNumber;
    params.titleId = query.titleId;
    params.projectId = query.projectId;
    if ($cookies.get("city") && $cookies.get("city") != "全国") {
      params.city = $cookies.get("city");
    }
    let hes = await $axios.get(GET_DOCTOR_SEARCH, { params: params });
    let obj = hes.data || {};
    let doctorList = obj.list || [];

    // 口腔百科
    let qes = await $axios.get(GET_ORALCAVITY_BAIKE_SEARCH, {
      params: { pageNumber: 1, pageSize: 4 },
    });
    let qbj = qes.data || {};
    let baikeList = qbj.list || [];

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 2, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return {
      titleList,
      projectList,
      doctorList,
      total: obj.totalElements,
      pageNumber,
      titleId: query.titleId || "",
      projectId: query.projectId || "",
      baikeList,
      seoInfo,
    };
  },
  methods: {
    // 切换分页
    changePage(e) {
      this.pageNumber = e;
      this.navigateToPage();
    },

    // 切换筛选条件
    searchHospital(e, id) {
      this[id] = e;
      this.navigateToPage();
    },

    // 切换路由
    navigateToPage() {
      let query = this.$route.query;
      let o = { pageNumber: this.pageNumber };
      if (this.titleId) {
        o.titleId = this.titleId;
      }
      if (this.projectId) {
        o.projectId = this.projectId;
      }

      if (this.titleId || this.projectId) {
        o.pageNumber = 1;
      }
      o.random = Math.random();
      let _path = `/doctor?${qs.stringify(o)}`;
      console.log(_path);
      this.$router.replace({
        path: _path,
      });
      //this.$routerReplace(o)
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/doctor.less";
</style>